<template>
	<view class="cut-corner-container" :style="[clipPath,{'height':height,'width':width}]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'CutCorner',
		data(){
			return {
				
			}
		},
		props:{
			clipSize:{
				default:'40rpx'
			},
			arrow:{
				default:1,
				// 1 2
				// 3 4
			},
			height:{
				default:'fit-content'
			},
			width:{
				default:'fit-content'
			},
		},
		computed:{
			clipPath(){
				const arrow = Number(this.arrow)
				switch (arrow){
					case 1:
						return {
							'-webkit-clip-path': `
								polygon(${this.clipSize} 0, 100% 1%, 100% 100%, 0 100%, 0 ${this.clipSize})
							`,
							'clip-path': `
								polygon(${this.clipSize} 0, 100% 1%, 100% 100%, 0 100%, 0 ${this.clipSize})
							`
						}
						break;
					case 2:
						return {
							'-webkit-clip-path': `
								polygon(0% 0%, calc(100% - ${this.clipSize}) 0, 100% ${this.clipSize}, 100% 100%, 0% 100%)
							`,
							'clip-path': `
								polygon(0% 0%, calc(100% - ${this.clipSize}) 0, 100% ${this.clipSize}, 100% 100%, 0% 100%)
							`
						}
						break;
					case 3:
						return {
							'-webkit-clip-path': `
								polygon(0% 0%, 100% 0, 100% calc(100% - ${this.clipSize}), calc(100% - ${this.clipSize}) 100%, 0% 100%)
							`,
							'clip-path': `
								polygon(0% 0%, 100% 0, 100% calc(100% - ${this.clipSize}), calc(100% - ${this.clipSize}) 100%, 0% 100%)
							`
						}
						break;
					case 4:
						return {
							'-webkit-clip-path': `
								polygon(0 0, 100% 1%, 100% 100%, ${this.clipSize} 100%, 0 calc(100% - ${this.clipSize}))
							`,
							'clip-path': `
								polygon(0 0, 100% 1%, 100% 100%, ${this.clipSize} 100%, 0 calc(100% - ${this.clipSize}))
							`
						}
						break;
					default:
						return {}
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.cut-corner-container {
		position: relative;
		transition: all 0.3s;
	}

</style>